<template>
  <div class="zuzhiadd">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/index' }">
        <el-icon><House /></el-icon>首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>组织机构</el-breadcrumb-item>
      <el-breadcrumb-item>组织管理</el-breadcrumb-item>
      <el-breadcrumb-item>新增组织</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 标题 -->
    <div class="title">新增组织</div>
    <!-- 表单 -->
    <el-form :model="form" label-width="120px" ref="ruleFormRef" :rules="rules">
      <div class="one">
        <el-form-item label="组织名称:" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="组织负责人:" prop="fuzeren">
          <el-input v-model="form.fuzeren" />
        </el-form-item>
      </div>

      <div class="two">
        <el-form-item label="组织人数:" prop="num">
          <el-input v-model="form.num" />
        </el-form-item>
        <el-form-item label="分管领导:" prop="lingdao">
          <el-input v-model="form.lingdao" />
        </el-form-item>
      </div>

      <el-form-item label="组织类型:" prop="region">
        <el-select v-model="form.region" placeholder="请选择">
          <el-option label="部门" value="部门" />
          <el-option label="分支机构" value="分支机构" />
          <el-option label="公司" value="公司" />
          <el-option label="项目组" value="项目组" />
          <el-option label="办公室" value="办公室" />
        </el-select>
      </el-form-item>

      <el-form-item label="备注:" >
        <el-input v-model="form.desc" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit()">保存</el-button>
        <el-button @click="back()">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ElNotification } from "element-plus";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { addzuzhi } from "@/api/gang/gang";
var $router = useRouter();
var ruleFormRef = ref();
//规则
var rules = ref({
  name: [{ required: true, message: "请输入", trigger: "blur" }],
  fuzeren: [{ required: true, message: "请输入", trigger: "blur" }],
  lingdao: [{ required: true, message: "请输入", trigger: "blur" }],
  region: [{ required: true, message: "请输入", trigger: "blur" }],
  num: [{ required: true, message: "请输入", trigger: "blur" }],
});

var form = ref({
  name: "",
  fuzeren: "",
  lingdao: "",
  region: "",
  desc: "",
  num: "",
});
//新增
var onSubmit = () => {
  ruleFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      var res = await addzuzhi(form.value);
      console.log(res);
      ElNotification({
        title: "通知",
        message: "新增组织成功",
        type: "success",
        duration: 2000,
      });
      $router.go(-1);
    } else {
      ElNotification({
        title: "通知",
        message: "请检查输入信息",
        type: "error",
        duration: 2000,
      });
    }
  });
};
//返回
var back = () => {
  $router.back();
};
</script>

<style scoped lang="scss">
.zuzhiadd {
  .breadcrumb {
    font-size: 20px;
  }
  .title {
    margin: 20px 0;
    padding: 0 0 20px;
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
  }
  .el-input {
    width: 400px;
  }
  .one,
  .two {
    display: flex;
  }
}
</style>